<template>
  <div class="container box card">
      <div class="header">
          <div class="logo">
              <img class="logo-img" src="~assets/img/timecube-logo.png">
          </div>
          <div class="title">
              <h3>帐号登录</h3>
          </div>
      </div>
      <div class="content">
          <validator name="loginForm">
            <form role="form" name="Form" class="col-md-4 col-md-offset-4 col-sm-12" autocomplete="off" novalidate>
                <div class="form-group">
                  <input type="text" class="form-control" v-model="account.username" initial="off" detect-change="off"  placeholder="请输入手机号" v-validate:username="['required', 'mobile']">
                  <div>
                    <error-template v-show="$loginForm.username.required">{{$loginForm.username.required}}</error-template>
                    <error-template v-show="$loginForm.username.mobile&&!$loginForm.username.required">{{$loginForm.username.mobile}}</error-template>
                  </div>
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" v-model="account.password" initial="off" detect-change="off"  placeholder="请输入密码" v-validate:password="{'required':true,'minlength':8}">
                    <div>
                        <error-template v-show="$loginForm.password.required">{{$loginForm.password.required}}</error-template>
                        <error-template v-show="!$loginForm.password.required&&$loginForm.password.minlength">{{$loginForm.password.minlength}}</error-template>
                    </div>
                </div>
                <div class="form-group">
                    <button type="button" v-on:click.prevent="login"  class="btn btn-success form-control register">立即登录</button>
                </div>
            </form>
          </validator>
          <div class="clearfix"></div>
      </div>
      <div class="other">
          <ul>
              <li><a href="/signup.html">注册帐号</a></li>
              <li>|</li>
              <li><a href="/findpwd.html">忘记密码</a></li>
          </ul>
      </div>
  </div>
</template>
<script>
/**
 * signin box
 * @author:  guocailee
 * @date: 2016-09-18
 **/
import { userLogin } from 'src/api/user'
export default {
  data () {
    return {
      account: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    login () {
      var self = this
      this.$validate(true, () => {
        if (self.$loginForm.invalid) {
          return
        }
        userLogin(this.account).then(data => {
          window.location.href = '/'
        }).catch(data => {
          self.$notify({
            message: data,
            type: 'error'
          })
        })
      })
    }
  },
  components: {}
}

</script>